<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 0.1px solid black;
        }
        
        td {
            border: 0.1px solid black;
        }
        
        ul li {
            color: green;
            border-bottom: 1px solid #000;
        }
    </style>
</head>

<body>
    <h1>DOM结构树</h1>
    <table>
        <tr>
            <td></td>
            <td>Document----</td>
            <td>-HTMLDocument</td>
            <td>HTMLHeadElement</td>
        </tr>
        <tr>
            <td></td>
            <td>CharacterData》</td>
            <td>《Text</td>
            <td>HTMLBodyElement</td>
        </tr>
        <tr>
            <td>Node</td>
            <td></td>
            <td>《Comment</td>
            <td>HTMLTitleElement</td>
        </tr>
        <tr>
            <td></td>
            <td>Element------</td>
            <td>-HTMLElement--------</td>
            <td>HTMLParagraphElement</td>
            <tr>
                <td></td>
                <td>Attr</td>
                <td></td>
                <td>HTMLInputElement</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>HTMLTableElement</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>...etc.</td>
            </tr>
    </table>
    <h2>DOM习题</h2>
    <dt>1.遍历元素节点树（在原型链上编程）</dt>
    <dt>2.封装函数，返回元素e的第n层祖先元素节点</dt>
    <dt>3.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，
    <br>n为负，返回前面的，n为0，返回自己。</dt>
    <dt>4.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题 </dt>
    <dt>5.自己封装hasChildren()方法，不可用children属性</dt>
    <h1>DOM基本操作</h1>
    <ul>
        <li>getElementById方法定义在Document.ptototype上，即Element节点上不能使用。</li>
        <li>getElementsByName方法定义在HTMLDocument.prototype上，即非HTML中的
            <br>document不能使用（xml,document,Element）</li>
        <li>getElementsByTagName方法定义在Document.protptype和Element.prototype上</li>
        <li>HTMLDocument.prototype定义了一些常用属性，body,head,分别指代
            <br>HTML文档中的（body，head）标签</li>
        <li>Document.prototype上定义了documentElement属性，指代文档的根元素，在
            <br>HTML文档中，他总是指代HTML元素</li>
        <li>getElementsByClassName、querySelectorAll、querySelector在
            <br>Document.prototype,Element.prototype类中均有定义</li>
    </ul>

    <!-- <div> -->
    <!-- <b></b> -->
    <!-- 第二题 -->
    <!-- 666 -->
    <!-- <strong> -->
    <!-- <span></span> -->
    <!-- <i></i> -->
    <!-- </strong> -->
    <!-- </div> -->

    <section>
        <!-- 第三题 -->
        <span></span>
        <p></p>
        <strong></strong>
        <i></i>
        <b></b>
    </section>
    <script>
        // HTMLBodyElement.prototype.abc = 'demo';
        // var body = document.getElementsByTagName('body')[0];
        // console.log(body.abc);//结构树使用

        // 2.封装函数，返回元素e的第n层祖先元素节点
        // function retParent(e, n) {
        //     while (e && n) {
        //         e = e.parentElement; //每次操作让元素e等于自己的父级
        //         n--;
        //     }
        //     return e;
        // }
        // var i = document.getElementsByTagName('i')[0];
        // console.log(retParent(i, 2));

        // 3.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，
        // n为负，返回前面的，n为0，返回自己。
        // function retSibling(e, n) {
        //     while (e && n) {
        //         if (n > 0) {
        //             if (e.nextElementSibling) {
        //                 e = e.nextElementSibling;
        //             } else {
        //                 for (e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling);
        //             }
        //             n--;
        //         } else {
        //             if (e.previousElementSibling) {
        //                 e = e.previousElementSibling;
        //             } else {
        //                 for (e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling);
        //             }
        //             n++;
        //         }
        //     }
        //     return e;
        // }
        // var strong = document.getElementsByTagName('strong')[0];
        // console.log(retSibling(strong, -1));

        // 4.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题
        // Element.prototype.myChildren = function() {
        //     var child = this.childNodes,
        //         len = child.length,
        //         arr = [];
        //     for (var i = 0; i < len; i++) {
        //         if (child[i].nodeType == 1) {
        //             arr.push(child[i]);
        //         }
        //     }
        //     return arr;
        // }
        // var div = document.getElementsByTagName('div')[0];
        // console.log(div.myChildren());//（区别出元素节点）
    </script>
</body>

</html>